<template>
  <!-- 条码列表 -->
  <div class="finishprint">
    <jc-button
      :btn-arr="['reload', 'option']"
      :disab-arr="['using', 'close', 'cancel', 'com1', 'com2', 'chart', 'freeze']"
      @refresh="handleGetUntreated"
      @toExcel="handleExport"
    />
    <div class="header">
      <div class="header-name">
        <el-input v-model="fmoBillNo" size="mini" placeholder="生产订单号" @keyup.enter.native="handleQuerySonClass" />
        <el-input v-model="fpaezText" size="mini" placeholder="客户订单号" @keyup.enter.native="handleQuerySonClass" />
        <el-button type="primary" size="mini" @click="handleQuerySonClass">{{ $t('btn.search') }}</el-button>
        <filtration
          ftype="printList"
          :table-header="tableHeader1"
          :detail-header="tableHeader"
          @seachData="handleQuerySonClass"
        />
      </div>
    </div>
    <div>
      <jc-table
        v-loading="loading"
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        sortable
        serial
      >
        <!--    物料编码    -->
        <template v-slot:orderSlot="col">
          <el-link type="primary" @click="jumpMateriel1(col.scope.row.packingNumber)">
            {{ col.scope.row.packingNumber }}
          </el-link>
        </template>
        <template v-slot:btnSlot="col">
          <el-button size="mini" type="primary" @click="printDa(col.scope.row)">打印</el-button>
          <el-button size="mini" type="primary" @click="printDetail(col.scope.row)">详情</el-button>
        </template>
      </jc-table>
      <!--    分页器-->
      <div class="footer">
        <jc-pagination
          :total="total"
          :page.sync="currentPage"
          :limit.sync="size"
          @pagination="handleGetUntreated"
        />
      </div>
    </div>
    <el-dialog
      v-dialogDrag
      title="条码生成"
      model
      :visible.sync="isPrintDialog"
      :close-on-click-modal="false"
      center
    >
      <el-form :model="printData" size="mini" label-width="100px">
        <el-form-item :label="$t('market.fmaterial')">
          <el-input v-model="printData.packingNumber" disabled />
        </el-form-item>
        <el-form-item :label="$t('shop.fname2')">
          <el-input v-model="printData.packingName" disabled />
        </el-form-item>
        <el-form-item :label="$t('market.fmodel')">
          <el-input v-model="printData.packingModel" disabled />
        </el-form-item>
        <el-form-item :label="$t('shop.fspecificaTion')">
          <el-input v-model="printData.packingSpecificaTion" disabled />
        </el-form-item>
        <el-form-item :label="$t('market.paezText1')">
          <el-input v-model="printData.fpaezText" disabled />
        </el-form-item>
        <el-form-item :label="$t('market.mobillNo')">
          <el-input v-model="printData.fmoBillNo" disabled />
        </el-form-item>
        <el-form-item :label="$t('market.frombillNo')">
          <el-input v-model="printData.fbillNo" disabled />
        </el-form-item>
        <el-form-item :label="$t('market.fpaezAssistant')">
          <el-input v-model="printData.fdatavalue" disabled />
        </el-form-item>
        <el-form-item label="条码数量">
          <el-input-number v-model="printData.number" :min="0" @change="sumHandel" />
        </el-form-item>
        <el-form-item label="单个条码包装数量" label-width="120px">
          <el-input-number v-model="printData.qty" :min="0" @change="sumHandel" />
        </el-form-item>
        <el-form-item label="条码总数量">
          <el-input-number v-model="printData.sumqty" :min="0" :max="printData.printQty" disabled />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isPrintDialog = false">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="allocation">生成条码</el-button>
        <el-button type="success" @click="allocation(2)">生成条码并打印</el-button>
      </span>
    </el-dialog>
    <!-- 详情 -->
    <printDetail v-if="printVis" :pri-da="priDa" @client="loadUp" />
  </div>
</template>

<script>
import searData from '@/components/Search/mixin'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel'
import filtration from '@/components/filtration'
import jcButton from '@/components/Button'
import { createProductCode, queryProductionList } from '@/api/finished'

export default {
  // name: 'ForthwithRep',
  components: {
    jcButton,
    filtration,
    printDetail: () => import('@/views/finished/finishPrint/printDetail')
  },
  mixins: [searData],
  data() {
    return {
      isPrintDialog: false,
      printVis: false,
      fpaezText: '',
      fmoBillNo: '',
      printData: {},
      priDa: {},
      total: 0, // 总条目
      currentPage: 1, // 当前页
      size: 200, // 每页显示多少条数据
      // 表头
      tableData: [], // 销售数据
      tableHeight: '73vh',
      tableHeader: [
        { label: this.$t('market.frombillNo'), prop: 'fbillNo', width: '120' },
        { label: this.$t('market.paezText1'), prop: 'fpaezText', width: '120' },
        { label: this.$t('market.mobillNo'), prop: 'fmoBillNo', width: '120' },
        { label: this.$t('market.fmodel'), prop: 'packingModel', width: '120' },
        { label: this.$t('market.fmaterial'), type: 'order', prop: 'packingNumber', width: '120' },
        { label: this.$t('shop.fname2'), prop: 'packingName', width: '120' },
        { label: this.$t('shop.fspecificaTion'), prop: 'packingSpecificaTion', width: '140' },
        { label: this.$t('market.funit'), prop: 'funit', width: '80' },
        { label: this.$t('shop.fdescripTion'), prop: 'packingDescripTion' },
        { label: this.$t('market.orderNumber'), prop: 'fqty', width: '80' },
        { label: this.$t('market.fpaezAssistant'), prop: 'fdatavalue', width: '100' },
        { label: this.$t('market.readyQty'), prop: 'freadyQty', width: '100' },
        { label: this.$t('market.instockqty'), prop: 'inQty', width: '100' },
        { label: this.$t('market.printQty'), prop: 'printQty', width: '100' },
        { label: this.$t('market.fproductqty'), prop: 'fproductqty', width: '100' },
        { label: this.$t('market.handle'), type: 'btn', width: '200' }
      ],
      tableHeader1: []
    }
  },
  created() {
    this.handleGetUntreated()
    this.tableHeader1 = this.tableHeader
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 240px)' : '70vh'
  },
  methods: {
    // 导出表格
    handleExport() {
      require.ensure([], () => {
        const tHeader = this.tableHeader.map((res) => {
          return res.label
        })
        const filterVal = this.tableHeader.map((res) => {
          return res.prop
        })
        if (this.tableData.length <= 0) {
          this.$message.warning('没有导出数据')
        } else {
          queryProductionList({
            pageSize: 100000,
            pageNum: 1,
            fpaezText: this.fpaezText,
            fmoBillNo: this.fmoBillNo
          }).then(res => {
            if (res.code === 0) {
              const list = res.data.list
              const data = formatJson(filterVal, list)
              export_json_to_excel(tHeader, data, '打印列表')
            } else {
              this.$confirm(res.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 获取打印
    async handleGetUntreated() {
      this.loading = true
      const DATA = {
        pageNum: this.currentPage,
        pageSize: this.size,
        fpaezText: this.fpaezText,
        fmoBillNo: this.fmoBillNo
      }
      const RES = await queryProductionList(DATA)
      this.tableData = RES.data.list
      this.total = RES.data.total
      this.loading = false
    },
    // 搜索
    handleQuerySonClass(ev) {
      this.currentPage = 1
      if (ev && ev.fname) {
        this.searchSon = ev.detail
        this.customHandle(ev)
        this.handleGetUntreated(ev.detail)
      } else {
        this.handleGetUntreated()
      }
    },
    loadUp() {
      this.printVis = false
      this.handleGetUntreated()
    },
    // 打印
    printDa(ev) {
      this.printData = {
        ...ev,
        sumqty: 0,
        number: 0,
        qty: 0
      }
      this.isPrintDialog = true
    },
    sumHandel() {
      this.printData.sumqty = this.printData.qty * this.printData.number
    },
    // 生成条码
    allocation(ev) {
      const {
        sumqty, number, qty,
        fmaterialId, fmoBillNo,
        fprdentryid, fpaezText
      } = this.printData
      const DATA = {
        sumqty, number, qty,
        fmaterialid: fmaterialId,
        fprdno: fmoBillNo,
        fprdentryid,
        salKhddh: fpaezText
      }
      createProductCode(DATA).then(res => {
        if (res.code === 0) {
          // 刷新
          this.handleGetUntreated()
          ev === 2 && this.printDaLian(res.data)
          this.isPrintDialog = false
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 打印
    printDaLian(ev) {
      this.$router.push({
        path: `/printLian/${ev}`
      })
    },
    // 查看详情
    printDetail(ev) {
      const { fmoBillNo, fprdentryid } = ev
      this.priDa = {
        fprdno: fmoBillNo,
        fprdentryid
      }
      this.printVis = true
    }
  }
}
</script>
<style lang="scss" scoped>
.finishprint {
  @include listBom;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      margin-bottom: 10px;
    }
  }
  .header{
    position:relative;
    margin-bottom: 5px;
    .header-name{
      margin-top: 5px;
      .el-input {
        width: 200px;
        margin-right: 10px;
      }
    }
    .btn{
      transform: translateY(18%);
      margin-left: 450px !important;
    }
  }
}
</style>
